<template>
   <div class="qtlist">
       <h4>配送员列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;display:flex; justify-content: space-between;">
                
                 <el-button type="primary"  size="small" 
                   style="margin-bottom:14px;" @click="add_deliver()">新增配送员</el-button>
                    <div>
                        <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                            真实姓名：
                            <el-input clearable
                                placeholder="请输入真实姓名"
                                v-model="realName" class="filter-input"
                                @keyup.enter.native="search_deliver()">
                            </el-input>
                        </div>
                       <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                                联系方式：
                                <el-input clearable
                                    placeholder="请输入联系方式"
                                    v-model="tel" class="filter-input"
                                    @keyup.enter.native="search_deliver()">
                                </el-input>
                        </div>
                        <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                            所属区域：
                            <el-select clearable v-model="serviceSelected" placeholder="请选择">
                                    <el-option
                                    v-for="item in serviceArea"
                                    :key="item.id"
                                    :label="item.serviceZoneName"
                                    :value="item.id">
                                    </el-option>
                             </el-select>
                        </div>
                         <el-button type="primary" @click="search_deliver()">搜索</el-button>
                        </div>
                      
        
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"
                                  :index="formatter"></el-table-column>
                 <el-table-column prop="realName" label="真实姓名" width="140" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="联系方式" width="180" align="center"></el-table-column>
                <el-table-column prop="address" label="所属区域" align="center"  width="340">
                </el-table-column>
                 <el-table-column prop="isDeleted" label="状态" align="center" width="140" :formatter="formatterStatus">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="lookDetail( scope.row.id )">详情</el-button>
                    <el-button size="mini" type="primary" @click="lookDetail( scope.row.id )">修改</el-button>
                    <el-button size="mini" type="warning" @click="forbidden(scope.row.id,scope.row.isDeleted)">{{scope.row.isDeleted == 0? '禁用' :'启用'}}</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                                @current-change="getPageNum">
                </el-pagination>
            </div>
      </div>
       <!-- 新增配送员弹框 -->
      <el-dialog  title="新增配送员信息"  :visible.sync="dialogFormVisible" width="48%" top="18vh">
            <el-form :model="form"  :rules="rules"  ref="ruleForm">
                <el-form-item prop="realName" label="真实姓名" :label-width="formLabelWidth">
                       <el-input v-model="form.realName" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
               <el-form-item prop="tel" label="联系方式"  :label-width="formLabelWidth">
                       <el-input v-model="form.tel" maxlength="11"  auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item  prop="selected"  label="所属服务城市" :label-width="formLabelWidth">
                     <el-select v-model="form.selected" placeholder="请选择">
                            <el-option
                            v-for="item in serviceArea"
                            :key="item.id"
                            :label="item.serviceZoneName"
                            :value="item.id">
                            </el-option>
                     </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelSave('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="saveEdit('ruleForm')">保存</el-button>
            </div>
      </el-dialog>
  </div>  
</template>

<script>
import { deliverList,addDeliver,delDeliver,changeDeliverStatus,serviceZone } from '@/request/api'
import { AreaSelect } from "vue-area-linkage";
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
           loading:true,
           data: [],
           pageSize:10,
           pageNum:1,
           total:0,
           form:{
                realName:'',
                tel:'',
                selected: '',
            },
            serviceArea:[],  // 所属服务区
            serviceSelected:'',
            dialogFormVisible:false,
            formLabelWidth:'120px',
            value: '',
            realName:'', // 真实姓名
            tel:'',  // 联系方式 
         
            rules:{
                realName: [
                        { required: true, message: '真实姓名不能为空', trigger: 'blur' },
                        { validator: checkBlank, trigger: 'blur' }
                ],
                tel: [
                        {  required: true, message: '手机号不能为空', trigger: 'change' },
                        { pattern: /^(0|86|17951)?(1[3-9][0-9])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                    
                ],
                selected:[
                      {  required: true, message: '所属地区不能为空', trigger: 'change' },
                ]
            },
      
        }
   
    },
    created(){
       this.get_deliverList();
       serviceZone().then( res => {
               this.serviceArea = res.data;
       })
    },
    components:{
            AreaSelect
    },
    methods:{
      search_deliver(){
          this.get_deliverList();
      },
      formatterStatus(row,column)  {
        return row.isDeleted == 0 ? '可用' :'不可用'
      },
      formatter(row, column ) {
            return  this.pageSize*(this.pageNum-1) + 1 + row;
      },
      getPageNum(e){
          this.pageNum = e;
          this.get_deliverList();
      },
      lookDetail(id){
          this.$router.push({
              path:`/deliverylist/delivery_detail/${id}`
          })
      },
      //   新增配送员
      add_deliver(){
            this.dialogFormVisible = true; 
      },
      cancelSave(formName){
           this.dialogFormVisible = false;
           this.$refs[formName].resetFields();    
      },
      saveEdit(formName){
         this.$refs[formName].validate((valid)=> {
             if(valid) {
                //  新增配送员
                 addDeliver({
                    realName:this.form.realName,
                    tel:this.form.tel,
                    belongZone:this.form.selected  
                 }).then(res => {
                     console.log(res);
                     if(res.code == 1) {
                       this.$message({
                            type: 'success',
                            message: '新增成功'
                       });
                        this.dialogFormVisible = false;
                        this.$refs[formName].resetFields();
                        this.get_deliverList();
                     }else if(res.code == 2) {
                         this.$message({
                            type: 'info',
                            message: '手机号已存在，请重新输入'
                         });
                         this.form.tel = '';
                     }
                 })
             }
         })
      },
      get_deliverList(){
          deliverList({
              realName:this.realName,
              tel:this.tel,
              belongZone:this.serviceSelected,
              pageSize:this.pageSize,
              pageNum:this.pageNum
          }).then(res => {
              console.log(res);
              this.loading =  false;
              this.data = res.rows;
              this.total = res.total;
          })
      },
      handleDelete(id){
          this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delDeliver({
                 id:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.get_deliverList()
                 }
             })
         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
      forbidden(id,status){
         let info = status == 0 ?'确认要禁用配送员吗':'确认要启用配送员吗'
         let msg = status == 0 ?'禁用成功!':'启用成功!'
         let cancelMsg = status == 0 ?'已取消禁用!':'已取消启用!'
          this.$confirm(info, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             changeDeliverStatus({
                 id:id
             }).then(res=> {
                 console.log(res);
                 if(res.code == 1) {
                      this.$message({
                        type: 'success',
                        message: msg
                     });
                      this.get_deliverList()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: cancelMsg
              });  
         }) 
      },
     
     
    }
 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
 
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>